import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Alert,
  Modal,
  Button
} from 'react-bootstrap';

import AddHostInner from '../../components/deploy/addhost';
import { function_add_host } from '../../actions/deploy';

class AddHost extends Component {

  state = {
    passwordFlg: true
  }

  handleSubmit () {
    function_add_host(
      this.props.deployUrl,
      this.props.projectId,
      () => {
        this.props.handleSubmit();
      }
    );
    this.props.handleClose();
  }

  render () {
    return (
      <Modal className="addHostBox" show={this.props.show} onHide={this.props.handleClose.bind(this)} animation={true}>
        <Modal.Header closeButton>
          <Modal.Title>添加服务器</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Alert variant="warning">
            重要：务必确保从{this.props.deployHost}服务器上能够连接到该服务器
          </Alert>
          <AddHostInner projectId={this.props.projectId} />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={this.props.handleClose.bind(this)}>
            取消
          </Button>
          <Button variant="primary" onClick={this.handleSubmit.bind(this)}>
            添加
          </Button>
        </Modal.Footer>
      </Modal >
    )
  }
}

function mapStateToProps (state) {
  return {
    deployUrl: state.deploy.deployUrl,
    deployHost: state.deploy.deployHost,
  }
}

export default connect(mapStateToProps)(AddHost);